import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import {FormGroup, FormBuilder} from "@angular/forms";
import {LocalStorage} from "../../app.local-storage";
import {UserModel} from "../../model/user.model";
import {CONSTANT} from "../../service/constant.service";
import {TitleCpt} from "../../lib/title/title.component";
import {USER} from "../../service/user.service";
import {APARTMENT} from "../../service/apartment.service";
import {WfToast} from "../../utils/toast.utils";
import {IMAGEAPI} from "../../service/Image.api.service";
declare var $: any;


@Component({
  selector: 'app-onekey-repair-view',
  templateUrl: './onekey-repair-view.component.html',
  styleUrls: ['./onekey-repair-view.component.scss']
})
export class OnekeyRepairViewComponent implements OnInit {
  @Input('showModal') public isModalShown: boolean = false;
  @Output('modalClose') public modalClose = new EventEmitter();
  reqData:any={
    houseId:'',
    content:'',
    detail:'',
    image:[]
  };
  repairForm: FormGroup;
  user:UserModel;
  hello: string;
  repairTitleCpt: Array<TitleCpt> = this.constant.genRepairTitleCptList();
  apartmentList:any = [];
  houseList:any = [];
  constructor(private fb: FormBuilder,
              private constant: CONSTANT,
              private USER:USER,
              private ImageApi: IMAGEAPI,
              private apartmentApi:APARTMENT,private toast:WfToast) {
    this.user = this.USER.get();
    this.repairForm = fb.group({
      houseNo:[''],
      content: [''],
      detail: ['']
    })
  }
  // 读取本地照片
  handleFile() {
    let that: any = this;
    let file = $('#fileList')[0];
    let reader = new FileReader();
    let formData = new FormData(document.forms.namedItem("fileinfo"));
    reader.readAsDataURL(file.files[0]);
    reader.onload = function () {
      that.reqData.image[0]= reader.result
      // $('#imgSrc').attr('src', reader.result);
      that.ImageApi.imageUpload(formData,(res:any)=>{
        if (that.reqData.image.length == 0){
          that.reqData.image.push(res.saveUrl);
        }else{
          that.reqData.image[0] = res.saveUrl;
        }
      })
    }
  }

  doRepair() {
    this.reqData.houseId=this.repairForm.get('houseNo').value;
    this.reqData.content=this.repairForm.get('content').value;
    this.reqData.detail=this.repairForm.get('detail').value;
    this.apartmentApi.getRepair(this.reqData,(res:any)=>{
      console.log(res);
      this.toast.msg('提交成功，稍后会有服务人员与您取得联系，请耐心等待哦！^_^');
      this.onHidden();
    })
  }

  loadApartment(){
    this.apartmentApi.getList({},(res:any)=>{
      let list:any = [{id:'',apartmentName:'请选择公寓名称'}];
      for(let item of res.content){
        let data:any={
          id:item.id,
          apartmentName:item.name
        }
        list.push(data);
      }
      this.apartmentList = list;
      // console.log(this.apartmentList);
    })
  }

  loadMyHouseList(){
    this.apartmentApi.getMyRenting({},(res:any)=>{
      console.log(res);
      let list:any = [{houseId:'',houseNo:'请选择房间号(*必选项)'}];
      for(let item of res){
        let data:any={
          houseId:item.houseId,
          houseNo:item.houseNo
        }
        list.push(data);
      }
      this.houseList = list;
    })
  }

  public showModal(): void {
    this.loadApartment();
    this.loadMyHouseList();
    this.isModalShown = true;
  }

  public onHidden(): void {
    this.isModalShown = false;
  }

  ngOnInit() {
    this.hello = this.constant.getNewDate();
  }

}
